<!-- 主界面 -->
<script setup>
import { ref } from "vue";
// 路由
import { useRouter } from "vue-router";
const router = useRouter();

// -------------------------------------------------------------------
const boxlists = ref([
	{
		path: "/test-view1",
		title: "测试界面1",
	},
	{
		path: "/test-view2",
		title: "动态表单",
	},
	{
		path: "/test-view3",
		title: "日志列表",
	},
]);
const HomeRouter = (path) => {
	router.push(path);
};
</script>

<template>
	<div class="home">
		<div
			class="box"
			v-for="(box, index) in boxlists"
			:key="index"
			@click="HomeRouter(box.path)"
		>
			{{ box.title }}
		</div>
	</div>
</template>

<style lang="less" scoped>
.home {
	width: 100vw;
	height: 100vh;

	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.box {
	margin: 24px;
	width: 200px;
	height: 160px;
	background-color: #3f72af;
	padding: 50px;
	color: #000000;
	font-size: 36px;
}
</style>
